//- 先去这个pug文件中找
extends ../commons/commons.pug

block append pageStyle
	link(href="${relativePath}/static/css/shopping/shopIndex.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/rightOrder.css" rel="stylesheet" type="text/css")
	link(href="${relativePath}/static/css/shopping/madeProcess.css" rel="stylesheet" type="text/css")

block content
	div.headerBox.myheaderBox
		div.layout.topheadBox
			//- div.topHead
			//- 	div.imgBox
			//- 		img(src="${relativePath}/static/imgs/img01.png")
			//- 		span.beCertified 已实名
			//- 	div.txBigBox
			//- 		p.designName 
			//- 			| 志玲广告工作室
			//- 			| <i>4.0分</i>
			//- 		p.txtBox
			//- 			span.provice.hasBorder 郑州市
			//- 			span.kinds 普通安装
			//- 		p.txtBox
			//- 			span.provice.hasBorder 姓名：谢**
			//- 			span.kinds 电话：123****2345
			//- 	div.btnsBox
			//- 		a.chat(href="javascript:;") 聊天
			//- 		a.rightnow(href="javascript:;") 立刻下单
			//- 		a.fr.concern(href="javascript:;") 关注
	//- 相册/已评论
	div.commentBox.mycommentBox
		ul.titleList.myTitleList
			li.myAlbum.myPhotos.current 个人相册
		//- 下面盒子
		//- 个人相册
		div.allBox.alumsBox
			div.upHref
				a.addbtn(href="javascript:;") 上传图片
				a.addbtn1(href="javascript:;") 添加相册
			ul.ablums
				//- li
				//- 	img(src="${relativePath}/static/imgs/img01.png")
				//- 	p IMGkenenghuiyoudongxi 
				//- 	div.mask
				//- 		i

		//- 评论
		div.allBox.commentBox(style="display:none;")
			div.allComment
				ul.plNav
					li.current.allPj
					li.imgPj
					li.goodPj 
					li.centerPj 
					li.badPj
				div.commentList
					
	//- 添加相册盒子
	div.addImgsMask
		div.insideBox
			div.imgsTitle 添加相册
			div.choiceBox
				div.row
					label 案例名称：
					input.txt.typename(type="text" name="typename")
				div.row
					label 相册类型：
					select.txt.arms
						option(name="list" value="2") 广告设计
						option(name="list" value="3") 广告安装
						option(name="list" value="4") 车辆设备租赁安装
				div.row.cartype
					label 类型：
					select.txt.twolist
						option(name="carlist") 请选择
				div.row.btnBox
					a.btn.sureBtn_01(href="javascript:;") 确定
					a.btn.cancleBtn(href="javascript:;") 取消
	//- 上传图片
	div.addImgsMask1
		div.addBox
			div.topSelct
				i
				label 上传至：
				select#selectList
			div.upImgBox
				div.upLoad
					input(type="hidden",name="order_img")
					div#fileUploadContent.fileUploadContent.fl
						form#uploadForm
							div.z_photo.upimg-div.clear
								section.z_file.fl
									img(src="${relativePath}/static/imgs/addImg.png").add-img
									input(type="file" name="file" id="orderImg" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple="multiple")
			input.sureBtn(type="button" value="确认上传")

	//- 个人信息模板
	script#personMsg(type="text/html")
		div.topHead
			div.imgBox
				img(src="{{avatar_img}}")
				| {{if verify_status =="2"}}
				span.beCertified 已实名
				| {{/if}}
			div.txBigBox
				p.designName {{company_name}}
					//- | <i>4.0分</i>
				p.txtBox
					span.provice.hasBorder {{city_name}}
					span.kinds {{category_name}}
				p.txtBox
					span.provice.hasBorder 姓名：{{nice_name}}
					span.kinds 电话：{{phone}}
			

	//- 我的个人相册列表
	script#myAlbmList(type="text/html")
		| {{set data = data.lists}}
		| {{each data arr}}
		li(id="{{arr.id}}")
			img(src="{{arr.default_photo}}")
			p {{arr.case_name}}
			div.mask
				i
			//- 总数
			i.allNumbers {{arr.count}}
		| {{/each}}


block pageScript

	script.

		$(function() {

			//- 点击li显示
			$(".titleList li").click(function() {
				var $this = $(this).index();
				$(this).addClass("current").siblings().removeClass("current");
				$(".commentBox .allBox").hide().eq($this).show();
			})

			//- 鼠标放在个人相册信息
			$(".ablums").on("mouseover","li",function() {
				$(this).children(".mask").show();
			})
			//- 鼠标离开个人相册信息
			$(".ablums").on("mouseleave","li",function() {
				$(this).children(".mask").hide();
			})

			//- 点击删除个人相册
			$(".ablums").on("click",".mask i",function() {
				var $this = $(this);
				layer.confirm('您确定删除此相册？', {
					btn: ['确定','取消'], //按钮
					title: ['删除相册', 'text-align:center;padding:0;']
				}, function(){
					$.post(shopIp+"/user/delphoto",{
						userToken:token,
						case_id:$this.closest("li").attr("id"),
					},function(data) {
						//console.log(data.msg);
						if(data.status == "200") {
							layer.msg(data.msg, {icon: 1});
							$this.closest("li").remove();
						} else{
							layer.msg(data.msg);
						}
					})
				}, function(){
						//layer.msg('已取消');
				});
				return false;
			})

			//- 点击取消关注
			$(".topheadBox").on("click",".concern",function() {
				if($(this).hasClass("current")) {
					$(this).html("关注");
					$(this).removeClass("current");

					//- 取消关注
					$.post(shopIp+"/Concern/concern",{
						userToken:token,
						concern_id:thisRequest.id
					},function(data) {
						layer.msg(data.msg);
					})
				} else{
					$(this).html("已关注");
					$(this).addClass("current");
					$.post(shopIp+"/Concern/concern",{
						userToken:token,
						concern_id:thisRequest.id
					},function(data) {
						layer.msg(data.msg);
					})
				}
			})

			//- 获取个人信息内容
			$.post(shopIp+"/user/info",{
				userToken:token
			},function(data) {
				//console.log(data);
				var headData = template("personMsg",data.data);
				//console.log(headData);
				$(".topheadBox").append(headData);
			})

			//- 获取我的相册列表
			function myAblums() {
				$.post(shopIp+"/user/myPhoto",{
					userToken:token,
				},function(data) {
					if(data.data.lists.length == 0) {
						$(".ablums").append("<img class='imgBig' src='${relativePath}/static/imgs/zw.png'/>");
						$(".ablums").css("text-align","center");
						$(".addbtn").click(function() {
							layer.msg("请先添加相册");
						})
					}else{
						var imgs = template("myAlbmList",data);
						$(".ablums").append(imgs);
						//- 获取相册下拉s
						var list = data.data.lists;
						for(var i=0;i<list.length;i++) {
							var optionEle = '<option value="'+list[i].id+'">'+list[i].case_name+'</option>';
							$("#selectList").append(optionEle);
						}
						$(".addbtn").click(function() {
							$(".addImgsMask1").show();
						})
					}
				})
			}
			myAblums();
			//- 点击添加相册取消
			//点击添加
			$(".upHref .addbtn1").click(function() {
				$(".addImgsMask").show();
			})
			$(".cancleBtn").click(function() {
				$(this).parents(".addImgsMask").hide();
				$(".typename").val("");
				$(".arms").val("2");
				if($(".arms").val() != "3") {
					$(".cartype").hide();
				}
			})
			//- 点击添加相册
			//- $(".upHref .addbtn").click(function() {
				
			//- })
			//- 点击取消添加图片
			$(".topSelct i").click(function() {
				$(".addImgsMask1").hide();
			})
			$(".btnBox .sureBtn_01").click(function() {
				$.post(shopIp+"/user/upphone",{
					userToken:token,
					case_name:$(".typename").val(),
					type_id:$(".arms").val(),
					category_id:$(".twolist").val()
				},function(data) {
					layer.msg(data.msg);
					setTimeout(function() {
						$(".addImgsMask").hide();
						location.reload();
					},1000);
				})
			})

			//- 图片上传
			$("input#orderImg").on("change", function() {
				var wrap = $(this).closest(".upimg-div");
				doUpload_img(this.files[0], function(data) {
					var imgUrl = $("input[name='order_img']").val();
					if(imgUrl) {
						$("input[name='order_img']").val(imgUrl + "," + data.data.path);
					} else {
						$("input[name='order_img']").val(data.data.path);
					}
					wrap.prepend("<span class='imgwarp'><img src='"+data.data.url+"' path='"+data.data.path+"' class='upimgs'></img><i></i></span>");
					if($("span.imgwarp img.upimgs").length > 7) {
						$("#orderImg").hide();
						$(".add-img").hide();
					}
					
				});
			});
			//- 上传图片
			function doUpload_img(file, callback) {
				var formdata=new FormData($("#uploadForm")[0])
				//console.log(formdata);
				$.ajax({
					url:shopIp+"/Utils/uploadFiles?userToken="+token,
					type:"post",
					data:formdata,
					dataType:"json",
					async:false,
					cache:false,
					contentType:false,
					processData:false,
					success:function(data) {
						//alert(data.msg);
						//console.log(data.data.path);
						//$(".hiddenTxt").val(data.data.path);
						callback(data);
					},
					error:function(data) {
						layer.msg(data.msg);
					}
				})
			}
			//- 点击删除图片
			$(".z_photo").on("click",".imgwarp i",function() {
				$(this).closest(".imgwarp").remove();
				$("#orderImg").show();
				$(".add-img").show();
			})
			//- 点击确认上传图片
			$(".sureBtn").click(function() {
				var optVal = $("#selectList").val();
				var imgsArr = [];
				$(".z_photo img").not(".add-img").each(function() {
					imgsArr.push($(this).attr("path"));
				})
				$.post(shopIp+"/user/upimg",{
					userToken:token,
					id:optVal,
					img:imgsArr
				},function(data) {
					if(data.status == "200") {
						layer.msg(data.msg);
						setTimeout(function() {
							window.location.reload();
						},1000);
					}else{
						layer.msg(data.msg);
					}
				})
			})

			//- 选择车辆租赁
			$(".arms").change(function() {
				//console.log($(this).val());
				if($(this).val() == "4") {
					$(".cartype").show();
				}else{
					$(".cartype").hide();
				}
			})

			//- 车辆选择类型
			$.post(shopIp+"/category/photoCategory",{
				userToken:token,
				type_id:4
			},function(data) {
				var dataList = data.data; 
				for(var i=0;i<dataList.length;i++) {
					var ele ="<option value='"+dataList[i].id+"'>"+dataList[i].name+"</option>";
					$(".twolist").append(ele);
				}
			})

			//- 点击列表进详情	
			$(".ablums").on("click","li",function() {
				$(".mask").hide();
				window.location.href = "../shopping/personrightOrder.html?id="+$(this).attr("id");
			})
		})

		